<script lang="ts">
export default {
  name: 'TabBar'
}
</script>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAppStore } from '@/store'
import { configName } from '@/config'
const config = configName()

interface tabProps {
  data?: [
    {
      title: string
      to: string
      name: string
      icon: string
    }
  ]
}

const getStyle = computed(() => useAppStore().tabbarStyle)

const props = defineProps<tabProps>()

const emit = defineEmits(['chang'])

const active = ref(config.HomeName)

const onChange = (value: number | string) => {
  emit('chang', value)
}
</script>

<template>
  <van-tabbar
    fixed
    route
    v-model="active"
    @change="onChange"
    :active-color="getStyle.activeColor"
    :inactive-color="getStyle.inactiveColor"
  >
    <van-tabbar-item
      v-for="(item, index) in props.data"
      :to="item.to"
      :name="item.name"
      :key="index"
      :icon="item.icon"
      >{{ item.title }}</van-tabbar-item
    >
  </van-tabbar>
</template>

<style lang="scss" scoped></style>
